/* -------- FUENTES -------- */

/* Importa una fuente externa para textos */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap');

/* Importa una fuente local para títulos */
@font-face {
    font-family : 'Proxima Nova Rg';
    src         : url('../fonts/proxima-nova-bold.otf');
}

/* -------- VARIABLES GLOBALES -------- */

/*
 * Definición de variables globales
 * con tamaños para móviles.
 */
:root {
    /* Colores */
    --primary-color     : #2A8BF4;
    --primary-color-alt : #035DBF; /* Color primario alternativo */
    --title-color       : #121F26;
    --text-color        : #676F73;
    --body-bg-color     : #FAFDFF; /* Color de fondo del sitio web */
    --white-color       : #ffffff;

    /* Variables auxiliares globales */
    --color             : var(--primary-color);
    --color-alt         : var(--primary-color-alt);

    /*  Fuentes  */
    --body-font  : 'Open Sans', sans-serif;
    --title-font : 'Proxima Nova Rg', sans-serif;

    /*  Anchura máxima de los contenedores */
    --max-width : 1200px;

    /*  Tamaños de los bloques e interlineados */
    --header-height     : 3rem; /* Tamaño del encabezado */
    --section-spacing   : 4rem; /* Espaciado entre secciones */
    --block-spacing     : 2rem; /* Espaciado entre bloques */
    --body-line-height  : 1.6; /* Tamaño de interlineado de los textos */
    --title-line-height : 1.3; /* Tamaño de interlineado de los títulos */

    /* Tamaños de las fuentes */
    --h1-font-size      : 2rem;
    --h2-font-size      : 1.5rem;
    --h3-font-size      : 1.25rem;
    --h4-font-size      : 1rem;
    --big-font-size     : 1rem;
    --normal-font-size  : 0.875rem;
    --small-font-size   : 0.75rem;
    --smaller-font-size : 0.6875rem;

    /* Apilamiento de capas */
    --z-back       : -10;
    --z-normal     : 1;
    --z-front      : 10;
    --z-tooltip    : 20;
    --z-overlay    : 30;
    --z-modal      : 40;
    --z-fixed      : 50;
    --z-off-canvas : 100;

    /* Otros */
    --border-radius : 0.5rem;
    --box-shadow    : 0 2px 2px rgba(36, 47, 66, 0.1);
}

/*
 * Modifica los tamaños de las variables
 * para pantallas mayores a 1024px (desktop)
 * con media queries.
 */
@media screen and (min-width: 1024px) {
    :root {
        /* Tamaños de los bloques */
        --header-height         : 4rem;
        --section-spacing       : 8rem;
        --block-spacing         : 4rem;

        /* Tamaños de las fuentes */
        --h1-font-size          : 3rem;
        --h2-font-size          : 2rem;
        --h3-font-size          : 1.5rem;
        --h4-font-size          : 1.25rem;
        --big-font-size         : 1.25rem;
        --normal-font-size      : 1rem;
        --small-font-size       : 0.875rem;
        --smaller-font-size     : 0.75rem;
    }
}

/* -------- ESTILOS BASE -------- */

body {
    display          : flex;
    flex-direction   : column;
    min-height       : calc(100vh - var(--header-height)); /* Altura mínima del body */
    padding-top      : var(--header-height); /* Evita que el contenido choque con el encabezado */
    color            : var(--text-color);
    font-family      : var(--body-font);
    font-size        : var(--normal-font-size);
    line-height      : var(--body-line-height); /* Interlineado de los textos */
    background-color : var(--body-bg-color);
}

a {
    color : var(--primary-color);
}
  
p {
    margin-top : 0; /* Resetea los párrafos */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top  : 0; /* Resetea los títulos */
    color       : var(--title-color);
    font-family : var(--title-font);
    line-height : var(--title-line-height); /* Interlineado de los títulos */
    font-weight : 800; /* Títulos en negritas */
}

h1 {
    font-size:  var(--h1-font-size);
}

h2 {
    font-size : var(--h2-font-size);
}

h3 {
    font-size : var(--h3-font-size);
}

h4 {
    font-size : var(--h4-font-size);
}

/* Estilos para títulos principales */
.main h1 {
    margin-bottom : var(--block-spacing);
    padding-top   : var(--block-spacing);
}

/* -------- CONTENEDORES Y SECCIONES -------- */

/* Contenedor en móvil */
.content-wrapper {
    width        : calc(100% - 2rem); /* Tamaño inicial del contenedor */
    max-width    : var(--max-width);
    margin-left  : 1rem;
    margin-right : 1rem;
}

/* Contenedor en desktop */
@media screen and (min-width: 1024px) {
    .content-wrapper {
        width        : 100%;

        /*
         * Como max-width es var(--max-width)
         * y es menor a 1024px, por lo tanto
         * centra el contenedor.
         */
        margin-left  : auto;
        margin-right : auto;
    }
}

/* Agrega separación entre secciones */
.section-container {
    margin-bottom : var(--section-spacing);
}

/* Centra los textos en las secciones */
.section-container h1,
.section-container h2 {
    text-align : center;
}

/* Contenedor de imágenes */
.image-container {
    width          : 100%;
    height         : 0; /* Define la altura de la imagen con el padding */
    overflow       : hidden;
    position       : relative;
    padding-bottom : 56.25%;
}

/*
 * Las imágenes abarcan todo el
 * ancho y alto del contenedor.
 */
.image-container img {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}

/* -------- BOTONES -------- */

/* Botón del sitio web */
.button {
    display         : inline-block;
    padding         : 0.75rem 1.25rem;
    border-radius   : 1.5rem;
    text-decoration : none;
    font-weight     : 600;
    color           : var(--white-color);
    background      : var(--color);
    border          : 1px solid var(--color);
}

/* Color del botón al pasar por encima */
.button:hover {
    background : var(--color-alt);
}

/* Botón blanco del sitio web con la clase button */
.button.white {
    /* Redefine las variables auxiliares */
    --color     : var(--white-color);
    --color-alt : var(--body-bg-color);

    color       : var(--primary-color);
}

/* Color del botón ghost */
.button.ghost {
    color      : var(--color);
    background : transparent;
}

/* Color del botón ghost al pasar por encima */
.button.ghost:hover {
    color      : var(--white-color);
    background : var(--color);
}

/* Color del botón blanco ghost al pasar por encima */
.button.ghost.white:hover {
    color      : var(--primary-color);
    background : var(--color);
}

/* -------- ENCABEZADO -------- */

/*
 * Dibuja el encabezado y lo posiciona
 * fijamente en la parte superior.
 */
.main-header {
    display    : flex;
    position   : fixed;
    top        : 0;
    height     : var(--header-height);
    width      : 100%;
    background : var(--white-color);
    box-shadow : 0 3px 5px rgba(112, 126, 132, 0.1);
    z-index    : var(--z-fixed); /* Asegura que esté por encima de todos los elementos */
}

/* Centra los elementos del encabezado horizontalmente */
.main-header .content-wrapper {
    display     : flex;
    align-items : center;
}

/* Posiciona el botón del menú en móvil a la derecha */
.main-header .jam {
    margin-left : auto;
    color     : var(--title-color);
    font-size : 2.5rem;
    cursor    : pointer;
}

/* Oculta el botón del menú en desktop */
@media screen and (min-width: 1024px) {
    .main-header .jam {
        display : none;
    }
}

/* Establece el alto del logo en móvil */
.main-header img {
    height : 1.5rem;
}

/* Establece el alto del logo en desktop */
@media screen and (min-width: 1024px) {
    .main-header img {
        height : 2rem;
    }
}

/* Alinea y centra los links del menú en móvil */
.main-menu {
    display         : flex;
    justify-content : center;
    align-items     : center; 
}

/* Posiciona los links del menú a la derecha en desktop */
@media screen and (min-width: 1024px) {
    .main-menu {
        margin-left : auto;
    } 
}

/* Crea el menú en móvil */
@media screen and (max-width: 1024px) {
    .main-menu {
        position        : fixed;
        top             : 0;
        left            : 0;
        width           : 100%;
        height          : 100vh;
        background      : var(--white-color);
        z-index         : var(--z-off-canvas);
        transform       : scale(0);
        transition      : transform 0.25s;
    }
}

/* Escala el menú en móvil al presionar el botón */
.main-menu.active {
    transform : initial; /* La escala inicial es 1 */
}

/* Resetea los links del menú */
.main-menu ul {
    list-style   : none;
    padding-left : 0;
    margin       : 0;
}

/* Posiciona los links del menú uno al lado del otro en desktop */
@media screen and (min-width: 1024px) {
    .main-menu ul {
        display : flex;
    }
}

/* Posiciona el botón del menú en la esquina superior */
.main-menu .jam-close {
    position : absolute;
    right    : 1rem;
    top      : 0.5rem;
}

/* Estilos de los links del menú */
.main-menu a {
    display         : block;
    padding         : 0.75rem 1rem;
    color           : var(--title-color);
    text-decoration : none;
    font-weight     : 600;
}

/* Centra el texto de los links del menú en móvil */
@media screen and (max-width: 1024px) {
    .main-menu a {
        text-align : center;
        font-size  : var(--big-font-size);
    }
}

/* Color de los links del menú al pasar por encima */
.main-menu a:hover {
    color : var(--primary-color);
}

/*
 * Elimina el padding del último link del menú
 * para que quede alineado al contenedor.
 */
@media screen and (min-width: 1024px) {
    .main-menu ul li:last-of-type a {
        padding-right : 0;
    }
}

/* -------- SECCIÓN DEL BANNER PRINCIPAL -------- */

/* Banner principal del home */
.main-banner {
    background : var(--primary-color);
    padding: 2rem 0;
}

/* Incrementa el padding del banner principal del home en desktop */
@media screen and (min-width: 1024px) {
    .main-banner {
        padding : 4rem 0;
    }
}

/* Centra el texto del banner principal del home en móvil */
@media screen and (max-width: 1024px) {
    .main-banner {
        text-align : center;
    }
}

/* Posiciona en columna el banner principal del home en móvil */
.main-banner .content {
    display : grid;
    gap     : 2rem;
}

/* Alinea los elementos del banner principal del home en desktop de forma horizontal */
@media screen and (min-width: 1024px) {
    .main-banner .container {
        display         : flex;
        flex-direction  : column;
        justify-content : center;
    }

    .main-banner .container:last-of-type {
        align-items : center;
    }
}

/* Divide en 2 columnas el contenido del banner principal del home en desktop */
@media screen and (min-width: 1024px) {
    .main-banner .content {
        grid-template-columns: 1fr 1fr;
    }
}

/* Estilos del título del banner principal del home */
.main-banner .title {
    color         : var(--white-color);
    margin-bottom : 1rem;
}

/* Posiciona a la izquierda el título del banner principal del home en desktop */
@media screen and (min-width: 1024px) {
    .main-banner .title {
        text-align : left;
    }
}

/* Estilos del subtítulo del banner principal del home */
.main-banner .subtitle {
    margin-bottom : 1.5rem;
    font-size     : var(--big-font-size);
    color         : var(--white-color);
    opacity       : 0.7;
}

/* Ancho de la imagen del banner principal del home */
.main-banner .image {
    width : 80%;
}

/* -------- SECCIÓN DE SERVICIOS -------- */

/*
 * Posiciona en una sola columna y agrega separación
 * entre los diferentes servicios del home en móvil.
 */
.services-section .services-container {
    display         : grid;
    gap             : 2rem;
    justify-content : center;
}

/* Posiciona en 3 columnas los servicios del home en desktop */
@media screen and (min-width: 1024px) {
    .services-section .services-container {
        grid-template-columns : repeat(3, 1fr);
    }
}

/* Posiciona en columna el contenido de los servicios del home en desktop */
.service-item {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    text-align     : center;
    max-width      : 300px;
    margin         : 0 auto;
}

/* Establece el tamaño y color de los iconos de los servicios del home */
.service-item .jam {
    margin-bottom : 1rem;
    color         : var(--primary-color);
    font-size     : 4rem;
}

/* Agrega un margen al título de los servicios del home */
.service-item h3 {
    margin-bottom : 0.5rem;
}

/* Resetea el párrafo de los servicios del home */
.service-item p {
    margin-bottom : 0;
}

/* -------- SECCIÓN SOBRE NOSOTROS -------- */

/* Estilos sobre nosotros del home */
.about-section {
    position   : relative;
    padding    : var(--block-spacing) 0;
    background : var(--primary-color);
    color      : var(--white-color);
    text-align : center;
}

/* Posiciona los textos encima del fondo sobre nosotros del home */
.about-section .content-wrapper {
    position : relative;
    z-index  : var(--z-front);
}

/* Estilos del título sobre nosotros del home */
.about-section .title {
    color : var(--white-color);
}

/* Estilos del párrafo sobre nosotros del home */
.about-section p {
    opacity : 0.85;
    margin-bottom: 2rem;
}

/* Posiciona la imagen al fondo sobre nosotros del home */
.about-section .background {
    position   : absolute;
    left       : 0;
    top        : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    z-index    : var(--z-normal);
    opacity    : 0.1;
}

/* -------- SECCIÓN DE PROYECTOS -------- */

/* Posiciona en columna la sección de proyectos del home */
.last-projects {
    display        : flex;
    flex-direction : column;
    align-items    : center;
}

/* Estilos del título de los proyectos del home */
.last-projects h2 {
    margin-bottom : var(--block-spacing);
}

/* Posiciona en columna los proyectos del home en móvil */
.last-projects .projects-container {
    display       : grid;
    gap           : 2rem;
    margin-bottom : var(--block-spacing);
}

/* Posiciona en 2 columnas los proyectos del home en tablet */
@media screen and (min-width: 680px) {
    .last-projects .projects-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Posiciona en 4 columnas los proyectos del home en desktop */
@media screen and (min-width: 1024px) {
    .last-projects .projects-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Estilos de la card de cada proyecto del home */
.project-item {
    text-decoration : none;
    border-radius   : var(--border-radius);
    box-shadow      : var(--box-shadow);
    background      : var(--primary-color);
    overflow        : hidden;
}

/* Opacidad inicial de la imagen de cada proyecto del home */
.project-item img {
    transition: opacity 0.25s;
}

/* Cambia la opacidad de la imagen al pasar por encima de cada proyecto del home */
.project-item:hover img {
    opacity : 0.1;
}

/* Muestra de nuevo el contenido al pasar por encima de cada proyecto del home */
.project-item:hover article > div:first-of-type {
    opacity : 1;
}

/* Posiciona el contenido encima de la imagen de cada proyecto del home */
.project-item article {
    position : relative;
}

/* Estilos del contenido de cada proyecto del home */
.project-item article > div:first-of-type {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    opacity         : 0; /* Oculta el contenido */
    color           : var(--white-color);
    transition      : opacity 0.25s;
    z-index         : var(--z-front);
}

/* Estilos del título de cada proyecto del home */
.project-item article > div:first-of-type h3 {
    margin-bottom : 0.25rem;
    color         : var(--white-color);
}

/* Estilos del párrafo de cada proyecto del home */
.project-item article > div:first-of-type p {
    margin-bottom : 0;
    opacity       : 0.8;
    font-size     : var(--small-font-size);
}

/* -------- SECCIÓN BOLSA DE TRABAJO -------- */

/* Estilos de los textos de bolsa de trabajo del home */
.work-with-us {
    text-align    : center;
    margin-bottom : var(--block-spacing);
}

/* Estilos del título de bolsa de trabajo del home en móvil */
.work-with-us .title {
    margin-bottom : 1rem;
}

/* Estilos del título de bolsa de trabajo del home en desktop */
@media screen and (min-width: 1024px) {
    .work-with-us .title {
        margin-bottom : 1.5rem;
    }
}

/* Agrega separación en el párrafo y botón de bolsa de trabajo del home en móvil */
.work-with-us .subtitle,
.work-with-us .button {
    margin-bottom : 1.5rem;
}

/* Agrega separación en el párrafo y botón de bolsa de trabajo del home en desktop */
@media screen and (min-width: 1024px) {
    .work-with-us .subtitle,
    .work-with-us .button {
        margin-bottom : 2rem;
    }
}

/* -------- REDES SOCIALES -------- */

/* Estilos de los links de las redes sociales del home */
.social-networks a {
    padding         : 0.25rem;
    color           : var(--text-color);
    font-size       : 1.25rem;
    text-decoration : none;
}

/* Cambia el tamaño de los enlaces de las redes sociales del home en desktop */
@media screen and (min-width: 1024px) {
    .social-networks a {
        font-size: 1.5rem;
    }
}

/* Cambia el color al pasar por encima de los links de las redes sociales del home */
.social-networks a:hover {
    color : var(--primary-color);
}

/* Agrega separación entre los enlaces de las redes sociales del home */
.social-networks a:not(:last-of-type) {
    margin-right : 1.5rem;
}

/* -------- FOOTER -------- */

/* Estilos del footer */
.main-footer {
    display         : flex;
    justify-content : center;
    align-items     : center;
    margin-top      : auto; /* Asegura posicionar al final */
    width           : 100%;
    height          : var(--header-height);
    background      : var(--white-color);
    font-size       : var(--small-font-size);
}

/* Resetea el párrafo del footer */
.main-footer p {
    margin-bottom : 0;
}

/* -------- PÁGINA SOBRE NOSOTROS -------- */

/*
 * Posiciona cada article en columna
 * y agrega separación entre ellos
 * de la página sobre nosotros en móvil.
 */
.about-us .content-wrapper {
    display     : grid;
    gap         : var(--block-spacing);
    --max-width : 800px; /* Modifica el tamaño del contenedor */
}

/*
 * Posiciona en columna el contenido de cada article y
 * centra su texto de la página sobre nosotros en móvil.
 */
.about-item {
    display    : grid;
    gap        : 1.5rem;
    text-align : center;
}

/* Invierte el orden del contenido de cada article
 * de la página sobre nosotros en móvil.
 */
.about-item > div:first-of-type {
    order : 2;
}

/*
 * Divide en 2 columnas el contenido de cada article
 * con separación, alinea el texto a la izquierda e
 * invierte el orden del contenido de los impares
 * de la página sobre nosotros en desktop.
 */
@media screen and (min-width: 1024px) {
    .about-item {
        grid-template-columns : 1fr 1fr;
        gap                   : 2rem;
        text-align            : left;
    }

    .about-item:nth-child(odd) > div:nth-of-type(2) {
        order : 2;
    }
}

/* Estilos de los subtítulos de la página sobre nosotros en móvil */
.about-item h2 {
    margin-bottom : 0.5rem;
}

/*
 * Modifica la alineación de los subtítulos
 * de la página sobre nosotros en desktop.
 */
@media screen and (min-width: 1024px) {
    .about-item h2 {
        text-align : left;
    }
}

/* Resetea los párrafos de cada article de la página sobre nosotros */
.about-item p {
    margin-bottom : 0;
}

/* Agrega borde a las imágenes de cada article de la página sobre nosotros */
.about-item img {
    border-radius : var(--border-radius);
}

/* -------- PÁGINA DE PROYECTOS -------- */

/* Posiciona en columna las cards de la página de proyectos en móvil */
.projects-section .projects-page-container {
    display : grid;
    gap     : 2rem;
}

/* Posiciona en 2 columnas las cards de la página de proyectos en tablet */
@media screen and (min-width: 680px) {
    .projects-section .projects-page-container {
        grid-template-columns : repeat(2, 1fr);
    }
}

/* Posiciona en 3 columnas las cards de la página de proyectos en desktop */
@media screen and (min-width: 1024px) {
    .projects-section .projects-page-container {
        grid-template-columns : repeat(3, 1fr);
    }
}

/* Redondea cada card de la página de proyectos */
.card-project {
    border-radius : var(--border-radius);
    overflow      : hidden;
    box-shadow    : var(--box-shadow);
}

/* Estilos de los links de cada card de la página de proyectos */
.card-project a {
    text-decoration : none;
    font-weight     : 600;
}

/* Estilos del título de cada card de la página de proyectos */
.card-project h3 {
    margin-bottom : 0.5rem;
}

/* Estilos de los párrafos de cada card de la página de proyectos */
.card-project p {
    margin-bottom : 1rem;
}

/* Agrega un padding al contenido de cada card de la página de proyectos */
.card-project > div:nth-of-type(2) {
    padding    : 1rem;
    background : var(--white-color);
}

/* -------- PÁGINA DE CONTACTO -------- */

/* Posiciona en columna el contenido de la página de contacto en móvil */
.contact-section .contact-container {
    display    : grid;
    gap        : var(--block-spacing);
    text-align : center;
}

/* Posiciona en 2 columnas el contenido de la página de contacto en desktop */
@media screen and (min-width: 1024px) {
    .contact-section .contact-container {
        --max-width           : 800px;
        grid-template-columns : 1fr 1fr;
        text-align            : left;
    }
}

/* Estilos de los subtítulos de la página de contacto */
.contact-section h4 {
    margin-bottom : 0.5rem;
}

/* Posiciona en columna los apartados de la página de contacto en móvil */
.contact-section address {
    display    : grid;
    gap        : 1rem;
    font-style : normal;
}

/* Invierte el orden del contenido de la página de contacto en desktop */
@media screen and (min-width: 1024px) {
    .contact-section address {
        order : -1;
        gap   : 2rem;
    }
}

/* Modifica el tamaño de los iconos de la página de contacto */
.contact-item .jam {
    font-size : 1.5rem;
}

/* Estilos del mapa de google de la página de contacto */
.map-ubication {
    width         : 100%;
    height        : 200px;
    overflow      : hidden;
    border-radius : var(--border-radius);
}

/* Estilos del iframe de facebook de la página de contacto hasta tablets */
@media screen and (max-width: 680px) {
    .fb-iframe {
        width: 100%;
        overflow: hidden;
    }
}
